<!DOCTYPE html>
<html dir="ltr" lang="en-us">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, user-scalable=no" />
        <meta charset="utf-8" />

        <title>Muddery Webclient</title>

        <!--CSS style sheet -->
        <link rel="stylesheet" type="text/css" media="screen" href="../libs/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="../css/webclient.css" />

        <!-- Importing the online jQuery javascript library -->
        <!--script src="http://code.jquery.com/jquery-1.6.1.js" type="text/javascript" charset="utf-8"></script-->
        <!--script src="http://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script-->

        <!--for offline testing, download the jquery library from jquery.com-->
        <script src="../libs/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../libs/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
        <script src="../libs/bootstrap.min.js"></script>

        <!-- settings -->
        <script src="../settings.js" type="text/javascript" charset="utf-8"></script>

		<!-- languages -->
        <script src="../lang/en-us/strings.js" type="text/javascript" charset="utf-8"></script>
        <script src="../lang/zh-cn/strings.js" type="text/javascript" charset="utf-8"></script>
        <script src="../lang/zh-tw/strings.js" type="text/javascript" charset="utf-8"></script>
        <script src="../lang/local_string.js" type="text/javascript" charset="utf-8"></script>
        
        <!-- client -->
        <script src="../client/evennia.js" type="text/javascript" charset="utf-8"></script>
        <script src="../client/client.js" type="text/javascript" charset="utf-8"></script>
        <script src="../client/commands.js" type="text/javascript" charset="utf-8"></script>
        
        <!-- utils -->
        <script src="../utils/map_data.js" type="text/javascript" charset="utf-8"></script>
        <script src="../utils/text2html.js" type="text/javascript" charset="utf-8"></script>
        <script src="../utils/data_handler.js" type="text/javascript" charset="utf-8"></script>
        <script src="../utils/escape.js" type="text/javascript" charset="utf-8"></script>
        <script src="../utils/utils.js" type="text/javascript" charset="utf-8"></script>

    </head>
    <body>
        <!-- Show popup windows in this div. -->
		<div id="popup_confirm_combat" class="container">
            <div role="dialog" class="modal in popup_modal">
                <div class="modal-dialog modal-sm vertical-center">
                    <div class="modal-content">
                    	<iframe id="frame_confirm_combat" class="modal-content popup_frame" src="./confirm_combat.html"></iframe>
        			</div>
        		</div>
        	</div>
        </div>
        <div id="popup_container" class="container">
            <div id="popup_modal" role="dialog" class="modal in">
                <div class="modal-dialog modal-sm vertical-center">
                    <div class="modal-content">
                        <iframe id="frame_message" class="modal-content popup_frame" src="./message.html"></iframe>
                    </div>
                </div>
                <div class="modal-dialog modal-sm vertical-center">
                    <div class="modal-content">
                        <iframe id="frame_object" class="popup_frame" src="./object.html"></iframe>
                    </div>
                </div>
                <div class="modal-dialog modal-sm vertical-center">
                    <div class="modal-content">
                        <iframe id="frame_get_objects" class="popup_frame" src="./get_objects.html"></iframe>
                    </div>
                </div>
                <div class="modal-dialog modal-sm vertical-center">
                    <div class="modal-content">
                        <iframe id="frame_dialogue" class="popup_frame" src="./dialogue.html"></iframe>
                    </div>
                </div>
                <div class="modal-dialog modal-sm vertical-center">
                    <div class="modal-content">
                        <iframe id="frame_shop" class="popup_frame" src="./shop.html"></iframe>
                    </div>
                </div>
                <div class="modal-dialog modal-sm vertical-center">
                    <div class="modal-content">
                        <iframe id="frame_goods" class="popup_frame" src="./goods.html"></iframe>
                    </div>
                </div>
                <div class="modal-dialog modal-sm vertical-center">
                    <div class="modal-content">
                        <iframe id="frame_combat" class="popup_frame" src="./combat.html"></iframe>
                    </div>
                </div>
                <div class="modal-dialog modal-sm vertical-center">
                    <div class="modal-content">
                        <iframe id="frame_combat_result" class="popup_frame" src="./combat_result.html"></iframe>
                    </div>
                </div>
                <div class="modal-dialog modal-lg vertical-center">
                    <div class="modal-content">
                        <iframe id="frame_map" class="popup_frame" src="./map.html"></iframe>
                    </div>
                </div>
                <div class="modal-dialog modal-sm vertical-center">
                    <div class="modal-content">
                        <iframe id="frame_new_char" class="popup_frame" src="./new_char.html"></iframe>
                    </div>
                </div>
                <div class="modal-dialog modal-sm vertical-center">
                    <div class="modal-content">
                        <iframe id="frame_delete_char" class="popup_frame" src="./delete_char.html"></iframe>
                    </div>
                </div>
            </div>
        </div>
    
        <!-- Window's header. -->
        <header id="header">
              <center>
                <!-- Game title. -->
                <h5 id="game_title">Muddery</h5>
              </center>
        </header>
    
        <!-- Window's body. -->
        <div id="wrapper">
            <div id="middlewindow">
                <div id="prompt_bar">
                    <div id="prompt_content">
                        <span class="prompt_element template"></span>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div id="msg_wnd" class="panel-body">
                        <div class="msg template"></div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div id="tab_content" class="panel-body">
                        <iframe id="frame_quick_login" class="content_frame" src="./quick_login.html"></iframe>
                        <iframe id="frame_login" class="content_frame" src="./login.html"></iframe>
                        <iframe id="frame_register" class="content_frame" src="./register.html"></iframe>
                        <iframe id="frame_select_char" class="content_frame" src="./select_char.html"></iframe>
                        <iframe id="frame_scene" class="content_frame" src="./scene.html"></iframe>
                        <iframe id="frame_information" class="content_frame" src="./information.html"></iframe>
                        <iframe id="frame_inventory" class="content_frame" src="./inventory.html"></iframe>
                        <iframe id="frame_skills" class="content_frame" src="./skills.html"></iframe>
                        <iframe id="frame_quests" class="content_frame" src="./quests.html"></iframe>
                        <iframe id="frame_honours" class="content_frame" src="./honours.html"></iframe>
                    </div>
                </div>
                <div id="tab_bar">
                    <ul id="tab_pills" class="nav nav-tabs">
                        <li id="tab_connect" role="presentation" class="" style="display: none;">
                            <a id="view_connect" onclick="Evennia.connect()">Connect</a>
                        </li>
                        <li id="tab_quick_login" role="presentation" class="" style="display: none;">
                            <a id="view_quick_login" onclick="controller.showContent('quick_login')">Login</a>
                        </li>
                        <li id="tab_scene" role="presentation" class="">
                            <a id="view_scene" onclick="controller.showContent('scene')">Scene</a>
                        </li>
                        <li id="tab_status" role="presentation" class="">
                            <a id="view_status" onclick="controller.showContent('information')">Status</a>
                        </li>
                        <li id="tab_inventory" role="presentation" class="">
                            <a id="view_inventory" onclick="controller.showContent('inventory')">Map</a>
                        </li>
                        <li id="tab_honours" role="presentation" class="">
                            <a id="view_honours" onclick="controller.showHonours()">Honours</a>
                        </li>
                        <li id="tab_system" role="presentation" class="">
                            <a id="view_logout" onclick="commands.doLogout()">Logout</a>
                        </li>
                    </ul>
                </div>
                <div id="input_bar">
                    <button id="msg_select" onclick="controller.showMsgTypes()" class="btn btn-default"></button>
                    <input id="msg_input" type="text" aria-describedby="basic-addon2" autocomplete="off" class="form-control" />
                    <button id="msg_send" onclick="controller.sendMessage()" class="btn btn-default">Send</button>
                    <ul id="msg_type_menu" class="dropdown-menu">
                        <li class="template">
                            <a onclick="controller.selectMsgType(this)" class="dropdown-item"></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <script src="../controllers/base_controller.js" defer="defer" type="text/javascript" charset="utf-8"></script>
        <script src="../controllers/muddery_main.js" defer="defer" type="text/javascript" charset="utf-8"></script>
        <script src="../client/frames.js" defer="defer" type="text/javascript" charset="utf-8"></script>
        <script src="../client/importer.js" defer="defer" type="text/javascript" charset="utf-8"></script>
    </body>
</html>
